<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Socket.IO chat</title>
    <link rel="stylesheet" href="./rightChat.css">
    <style>
        body {
            margin: 0; /* 重置默认的外边距 */
            /*padding-bottom: 3rem; !* 底部填充区域，3rem表示3倍的字体大小 *!*/
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: space-between;
            height: 100vh; /* 设置最小高度为视口高度 */
            /*min-height: calc(100vh - 3rem); !* 设置最小高度为视口高度减去3rem *!*/
            background-color: #ddd;
            overflow: hidden; /* 隐藏溢出的内容，防止滚动条出现 */
        }

        /*#form {*/
        /*    background: rgba(0, 0, 0, 0.15);*/
        /*    padding: 0.25rem;*/
        /*    display: flex; !* 子元素水平排列，填充满父元素 *!*/
        /*    height: 4rem;*/
        /*    box-sizing: border-box; !* 让内边距和边框不会撑大元素的尺寸 *!*/
        /*    backdrop-filter: blur(10px); !* 背景模糊 *!*/
        /*}*/

        /*#input {*/
        /*    border: none;*/
        /*    padding: 0 1rem;*/
        /*    flex-grow: 1; !* 子元素填充剩下的所有空间 *!*/
        /*    border-radius: 2rem;*/
        /*    margin: 0.25rem 0.25rem 0.25rem 0;*/
        /*}*/

        /*#input:focus { !* 获得焦点时 *!*/
        /*    outline: none; !* 去掉默认的外边框 *!*/
        /*}*/

        /*#form > button {*/
        /*    background: #b9a6ff;*/
        /*    border: none;*/
        /*    padding: 0 1rem;*/
        /*    margin: 0.25rem;*/
        /*    border-radius: 3px;*/
        /*    outline: none;*/
        /*    color: #fff;*/
        /*    width: 8rem;*/
        /*    font-size: 25px;*/
        /*    cursor: pointer;*/
        /*    transition: background 0.3s ease; !* 添加过渡效果 *!*/
        /*}*/
        /*#form > button:hover {*/
        /*    background: #9370db; !* 悬停时的颜色加深 *!*/
        /*}*/

        /*#messages {*/
        /*    list-style-type: none; !* 去掉列表的默认样式 *!*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/

        /*#messages > li {*/
        /*    padding: 0.5rem 1rem;*/
        /*}*/

        /*#messages > li:nth-child(odd) { !* 奇数行 *!*/
        /*    background: #efefef;*/
        /*}*/

        .leftBox {
            flex: 0 0 20%; /* 占据 body 总宽度的 20% */
            background: linear-gradient(to bottom, #c0efe4, #87CEFA); /* 使用线性渐变，从 #c0efe4 到 #87CEFA */
            /*background-color: #c0efe4;*/
            border-top-right-radius: 15px; /* 右上角圆角半径 */
            border-bottom-right-radius: 15px; /* 右下角圆角半径 */
            height: 100vh;
        }

        .rightBox {
            flex: 0 0 79%; /* 占据 body 总宽度的 20% */
            background-color: #ddd; /* 为了演示效果，添加了背景色 */
            /*min-height: calc(100vh - 3rem); !* 设置最小高度为视口高度减去3rem *!*/
            display: flex;
            flex-direction: column;
        }

        /*.upperBox {*/
        /*    flex: 1; !* 占据剩余的高度 *!*/
        /*    background-color: #ddd; !* 上面盒子的背景色 *!*/
        /*}*/

        /*.talkContent {*/
        /*    height: 100%;*/
        /*    background-color: #fff; !* 内部盒子的背景色 *!*/
        /*}*/
        /*.talkContentInner {*/

        /*}*/

        /*.talkTop {*/
        /*    height: 3rem; !* 上面盒子的高度为3rem *!*/
        /*}*/
        /*.talkTopInner {*/
        /*    color: #fff;*/
        /*    text-align: center;*/
        /*    line-height: 3rem; !* 与容器高度相等，实现垂直居中 *!*/
        /*    font-size: 25px; !* 设置文字大小，根据需要调整 *!*/
        /*    background-color: #b9a6ff;*/
        /*}*/

        /*.lowerBox {*/
        /*    height: 4rem; !* 下面盒子的高度为3rem *!*/
        /*}*/
    </style>
</head>
<body>
    <div class="leftBox">
        <div class="contactPeople">
            在线联系人
            <button class="refreshButton">刷新</button>
        </div>
        <div class="boxB">
            123
        </div>
    </div>
    <div class="rightBox">
        <div class="upperBox">
            <div class="talkTop">
                <div class="talkTopInner">
                    Chat Room
                </div>
            </div>
            <div class="talkContent">
                <div class="talkContentInner">
                    <ul id="messages"></ul>
                </div>
            </div>
        </div>
        <div class="lowerBox">
            <form id="form" action="">
                <input id="input" autocomplete="off"/>
                <button>Send</button>
            </form>
        </div>
    </div>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const messages = document.getElementById('messages');

    // 发送
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value) {
            socket.emit('chat message', input.value);
            input.value = '';
        }
    });

    //监听接收
    socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
</script>
</body>
</html>